<template>
  <div class="relation-part">
    <div class="chart" ref="chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import symbolIcon from '@/assets/images/icon/person.png';

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.setOption();
  },
  methods: {
    getData() {},
    setOption() {
      const symbol1 = 'image://' + symbolIcon;
      const symbol2 = 'image://' + symbolIcon;
      const symbol3 = 'image://' + symbolIcon;
      const symbol4 = 'image://' + symbolIcon;

      // tooltip
      const tooltip = {
        trigger: 'item',
        textStyle: { fontSize: '100%' },
        // backgroundColor: 'none',
        formatter: (params) => {
          if (params.dataType === 'edge') {
            return `
                <div>接触： 2021-01-24</div>
            `;
          }

          return `
                    <div>
                        <div>检测阳性：2021-02-17</div>
                        <div>出院：2021-03-03</div>
                    </div>
                `;
        },
      };

      const legend = {
        show: false,
      };
      const series = {
        type: 'graph',
        layout: 'none', // 图的布局
        symbol: symbol1, // 默认是「未感染」
        symbolSize: 90,
        label: {
          show: true,
          // align: 'center',
          align: 'center',
          textStyle: { fontSize: 12, color: '#fff' },
          formatter: (params) => {
            // return `{a${params.value.type}|密接人数：${params.value.num}}\n\n\n\n\n\n\n${params.name}`;
            return `\n\n\n\n\n\n${params.name}`;
          },
          rich: {
            a0: {
              color: '#fff',
              padding: [4, 5],
              backgroundColor: 'rgba(255, 86, 76, .45)',
            },
            a1: {
              color: '#fff',
              padding: [4, 5],
              backgroundColor: 'rgba(255, 86, 76, .35)',
            },
            a2: {
              color: '#fff',
              padding: [4, 5],
              backgroundColor: 'rgba(239, 255, 55, .35)',
            },
            a3: {
              color: '#fff',
              padding: [4, 5],
              backgroundColor: 'rgba(50, 233, 255, .35)',
            },
          },
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 8],
        edgeLabel: {
          show: true,
          textStyle: { fontSize: 12, color: '#fff' },
          formatter: '{c}',
        },
        data: [
          {
            name: '张三三',
            value: { num: 55, type: 0 },
            draggable: true,
            x: 20,
            y: 40,
            symbol: symbol3,
          },
          {
            name: '刘六',
            value: { num: 55, type: 2 },
            draggable: true,
            x: -10,
            y: 50,
            symbol: symbol2,
          },
          {
            name: '光头强',
            value: { num: 55, type: 1 },
            draggable: true,
            x: 0,
            y: 30,
            symbol: symbol4,
          },
          {
            name: '熊大',
            value: { num: 55, type: 2 },
            draggable: true,
            x: 36,
            y: 39,
            symbol: symbol2,
          },

          {
            name: '张芳芳',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 10,
            y: 50,
          },
          {
            name: '李四1',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 36,
            y: 25,
          },
          {
            name: '李四2',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 45,
            y: 48,
          },
          {
            name: '李四3',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 35,
            y: 52,
          },
          {
            name: '李四4',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 34,
            y: 62,
          },
          {
            name: '李四5',
            value: { num: 55, type: 3 },
            draggable: true,
            x: 18,
            y: 56,
          },
        ],
        links: [
          { source: 1, target: 2, value: '家人1' },
          { source: 2, target: 3, value: '家人2' },
          { source: 3, target: 0, value: '同事1' },
          { source: 0, target: 4, value: '朋友1' },
          { source: 0, target: 5, value: '同事2' },
          { source: 0, target: 6, value: '朋友2' },
          { source: 0, target: 7, value: '家人3' },
          { source: 0, target: 8, value: '家人4' },
          { source: 0, target: 9, value: '同事4' },
          { source: 0, target: 10, value: '同事5' },
        ],
        lineStyle: {
          opacity: 0.9,
          width: 1,
          curveness: 0,
          color: '#fff',
        },
      };

      const option = {
        tooltip,
        series,
        legend,
        backgroundColor: 'rgba(0,0,0,0.8)',
      };
      this.chart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.relation-part {
  .chart {
    height: 600px;
  }
}
</style>
